<template>
	<view class="rider-scope">
		<NavBar title="配送范围" bgc="#f4f5f7"/>
		<view class="content">
			<view class="currentScope">
				<view class="label"> 您当前负责的配送范围： </view>
				<view class="value"> {{regionName?regionName: '暂未设置配送范围'}} </view>
				<view class="tips"> 配送范围为选择位置周围10公里范围 </view>
			</view>
			<picker @change="change" mode="multiSelector" :range="cityList" range-key="label" @columnchange="columnchange">
				<view class="switchScope">
					<view class="label"> 更换配送范围 </view>
					<view class="value"> 
						<image src="/static/icon/order/right.png" class="right" /> 
					</view>
				</view>
			</picker>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import { EditRegionApi, GetRegionApi } from '@/service/rider.js'
	import { useAddressStore } from '@/store/index.js'
	const region = ref() // 此字段进攻展示
	const regionName = ref() // 此字段进攻展示
	const latitude = ref()
	const longitude = ref()
	const chooseLoaction = () => {
		const { lonlat } = useAddressStore()
		uni.chooseLocation({
			latitude: lonlat.latitude,
			longitude: lonlat.longitude,
			success: (res) => {
				region.value = res.address
				latitude.value = res.latitude
				longitude.value = res.longitude
			}
		})
	}
	
	const cityList = ref([[],[],[]])
	const columnchange = (e) => {
		const { detail } = e
		console.log(detail);
		if(detail.column === 2) return
		let region = cityList.value[detail.column][detail.value].value
		getRegion(region, detail.column)
	}
	const change = (e) => {
		let arr = []
		e.detail.value.forEach((item, index) => {
			arr.push(cityList.value[index][item].label)
			if(index == 2) [
				region.value = cityList.value[index][item].value
			]
		})
		EditRegionApi({region: region.value}).then(res => {
			console.log(res, 'res');
			regionName.value = arr.join(' ')
			console.log(region.value, regionName.value);
		})
	}
	const getRegion = (region,index) => {
		GetRegionApi({region}).then(res => {
			cityList.value[index+1] = res
			if(index == 0) {
				GetRegionApi({region: cityList.value[index+1][0].value}).then(sec => {
					cityList.value[index+2] = sec
				})
			}
		})
	}
	
	
	
	onLoad((e) => {
		regionName.value = e.region
		
		GetRegionApi().then(res => {
			cityList.value[0] = res
			GetRegionApi({region: cityList.value[0][0].value}).then(sec => {
				cityList.value[1] = sec
				GetRegionApi({region: sec[0].value}).then(thi => {
					cityList.value[2] = thi
				})
			})
		})
	})
</script>

<style scoped lang="scss">
	.rider-scope {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
			.currentScope {
				padding: 16px 14px 13px;
				box-sizing: border-box;
				border-radius: 10px;
				background-color: #fff;
				.label {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 16px;
					margin-bottom: 10px;
				}
				.value {
					color: #333333;
					font-size: 18px;
					font-weight: bold;
					line-height: 21px;
					margin-bottom: 10px;
				}
				.tips {
					font-weight: 400;
					font-size: 12px;
					color: #999999;
					line-height: 14px;
				}
			}
			.switchScope {
				height: 50px;
				padding: 0 12px;
				border-radius: 10px;
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				margin-top: 10px;
				align-items: center;
				justify-content: space-between;
				.right {
					width: 14px;
					height: 14px;
				}
			}
		}
	}
</style>
